<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../plugins/layui/layui-v2.5.6/layui/css/layui.css">
    <style>
        .plus-minus .layui-input-block{position: relative;}  
        .plus-minus input{position: absolute;top: 0px;left: 0px;text-align: center;}  
        .plus-minus button:nth-of-type(1){position: absolute;top: 0px;left: 0px;height: 100%;}  
        .plus-minus button:last-child{position: absolute;top: 0px;right: 0px;height: 100%;}  
    </style>
</head>
<body>
    <script src="../plugins/layui/layui-v2.5.6/layui/layui.js" charset="utf-8"></script>
    <script>
        layui.define(['layer'], function(exports){  
    var $ = layui.$  
    var obj = {  
        //数字加减函数（基本参数对象，最大值返回函数，最小值返回函数）  
        plusminus : function (){  
            $(".plus-minus").each(function(){  
                //定义按钮HTML  
                var plusminusbutton = '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal vk-minus"><i class="fa fa-minus"></i></button>'  
                                    +'<button type="button" class="layui-btn layui-btn-sm layui-btn-normal vk-plus"><i class="fa fa-plus"></i></button>';  
                var data = new Object;  
                data.step = $(this).find('input').data('step');  
                data.maxvalue = $(this).find('input').data('maxvalue');  
                data.minvalue = $(this).find('input').data('minvalue');  
                  
                //定义默认参数，合并参数  
                options = $.extend({  
                    step: 1, //每次点击加减的值  
                    maxvalue: false, //最大值，默认false，不限制  
                    minvalue: false, //最小值，默认false，不限制  
                },data);  
          
                var elem = $(this).find('input'),  
                step = parseInt(options.step),  
                maxvalue = options.maxvalue,  
                minvalue = options.minvalue;  
                //参数不规范则返回  
                if(elem == null || elem == undefined){return};  
                if(step == 0 || step == undefined){return};  
                //加入按钮HTML  
                $(elem).after(plusminusbutton);  
                  
                //点击增加  
                $(elem).parent().on("click", ".vk-plus", function(){  
                    var nowinput = $(this).siblings("input"), //当前输入框元素  
                    nowbutton = $(this).siblings("button"), //当前按钮元素  
                    oldval = $(nowinput).val(), //点击前的值  
                    newval = parseInt(oldval) + step; //点击后的值  
                      
                    if(newval < maxvalue && newval > minvalue)  
                    {  
                        $(nowbutton).removeClass("layui-btn-disabled");  
                    }  
                    //判断条件。是否最大值  
                    if(maxvalue == false)  
                    {  
                        $(nowinput).val(parseInt(oldval)+step);  
                    }  
                    if(maxvalue != 0 && newval < maxvalue)  
                    {  
                        $(nowinput).val(parseInt(oldval)+step);  
                    }  
                    if(maxvalue != 0 && newval >= maxvalue)  
                    {  
                        $(nowinput).val(maxvalue);  
                        $(this).addClass("layui-btn-disabled");  
                    }  
                    //模拟change事件  
                    $(nowinput).trigger('change');  
  
                    return;  
                });  
                //点击减少（同上）  
                $(elem).parent().on("click", ".vk-minus", function(){  
                    var nowinput = $(this).siblings("input"),  
                    nowbutton = $(this).siblings("button"), //当前按钮元素  
                    oldval = $(elem).val(),  
                    newval = parseInt(oldval) - step;  
                      
                    if(newval < maxvalue && newval > minvalue)  
                    {  
                        $(nowbutton).removeClass("layui-btn-disabled");  
                    }  
                    if(minvalue == false)  
                    {  
                        $(nowinput).val(parseInt(oldval)-step);  
                    }  
                    if(minvalue != 0 && newval > minvalue)  
                    {  
                        $(nowinput).val(parseInt(oldval)-step);  
                    }  
                    if(minvalue != 0 && newval <= minvalue)  
                    {  
                        $(nowinput).val(minvalue);  
                        $(this).addClass("layui-btn-disabled");  
                    }  
                    //模拟change事件  
                    $(nowinput).trigger('change');  
                      
                    return;  
                });  
            });  
        }  
    };  
    exports('common',obj);  
});  

layui.extend({  
    common: '{/}/assets/js/common'  //改为上方代码所在文件的路径  
}).use(['common'], function(){  
    var common = layui.common;  
    common.plusminus();  
}) ;
    </script>

<script>
    layui.use('layedit', function(){
        var layedit = layui.layedit;
        layedit.set({
            uploadImage: {
                url: "{:url('play/upload')}" //接口url
                ,type: '' //默认post
            }
        });
        layedit.build('content,options'); //建立编辑器
    });
</script>

<script>
    window.onload=function(){
   
   //Demo
   layui.use(['form','upload','element','laydate'], function(){
          var form = layui.form;
          var $ = layui.jquery
          ,upload = layui.upload;
          //监听提交
          form.on('submit(formDemo)', function(data){
              var date = new Date();
              subData = {
                  name:data.field.name.toString(),
                  major:data.field.major.toString(),
                  qq:data.field.QQ.toString(),
                  mobile_phone:data.field.phone.toString(),
                  sex:data.field.sex.toString()
              }
              
                  ajax({
                      type:'post',
                      url:'/free_clinic/submit',
                      data:subData,
                      success:(res)=>{
                          if(JSON.parse(res).msg == 'success'){
                              tip_text.innerHTML = '预约成功，请等待工作人员处理！';
                              tip_tip.style.display = 'block';
                          }else{
                              tip_text.innerHTML = '预约失败，请重新预约！';
                              tip_tip.style.display = 'block';
                          }
                                  
                     },
                      error:(err)=>{
                          tip_text.innerHTML = '预约失败，请重新预约！';
                      }
                  });     
              return false;
          });

          //多图片上传
          upload.render({
              elem: '#img_upload_btn'         //绑定点击按钮
              ,url: '/free_clinic/upload'     //访问后台路径
              ,multiple: true                 //确认上传多张图片
              ,accept: 'images/*'             //图片格式
              ,number: 6                      //最大上传图片数量
              ,auto:false                     //取消自动上传
              ,method: 'post'                 //请求上传的 http 类型
              ,bindAction:'#hideUpload'       //绑定真正的上传按钮
              ,data:{                         //访问后台提交的数据
                  id:()=>{
                      return $('#phone').val();//官方文档说明：实现动态传值
                  },
                  time:()=>{
                      return subData.signup_time;
                  }
                  
              }
              ,choose: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                  $('#img_upload').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">');
                });
              }
              ,done: function(res){
                //上传完毕
                
              }
            });
      });
};
</script>

    <div class="plus-minus">  
        <div class="layui-form-item">  
            <label class="layui-form-label">数量</label>  
            <div class="layui-input-block" style="width: 50px;">  
                <input type="number" name="num" data-step="1" data-maxvalue="20" data-minvalue="1" lay-verify="required" autocomplete="off" class="layui-input num">
            </div>  
        </div>  
    </div>  


    <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 " id="form_group_content">
        <label class="col-xs-12" for="content">规则</label>
        <div class="col-xs-12">
            <textarea id="content" class="js-ueditor" name="content" style="display: none;"></textarea>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">图片上传:</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;padding:10px 0 10px 0; ">
                  <div class="layui-upload-list" id="img_upload"></div>
               </blockquote>
               <button type="button" class="layui-btn"  style="background-color:#4383d3" id="img_upload_btn">添加图片</button> 
            </div>
            <button id="hideUpload" type="button" style="display: none"></button>
        </div>
    </div>
</body>
</html>